<template>
    <div class="the-header">
        <div class="header-logo" @click="goHome">
            <img src="../assets/img/here-music.png" class="icon" />
            <span>音乐</span>
        </div>
        <ul class="navbar">
            <li :class="{active: item.name == activeName}" v-for="item in navMsg" :key="item.path" @click="goPage(item.path,item.name)">
                {{item.name}}
            </li>
            <li>
                <div class="header-search">
                    <input type="text" placeholder="搜索音乐" @keyup.enter="goSearch()" v-model="keywords">
                    <div class="search-btn" @click="goSearch()">
                        <svg class="icon">
                            <use xlink:href = "#icon-sousuo"></use>
                        </svg>
                    </div>
                </div>
            </li>
            <li v-show="loginIn" :class="{active: item.name == activeName}" v-for="item in loginMsg" :key="item.path" @click="goPage(item.path,item.name)">
            {{ item.name }}
            </li>
        </ul>
        <div class="header-right" v-show="loginIn">
            <div id="user">
                <img :src="attachImageUrl(avatar)" alt="">
            </div>
            <menu class="menu">
                <li v-for="(item,index) in menuList" :key="index" @click="goMenuList(item.path)">
                {{ item.name }}
                </li>
            </menu>
        </div>
    </div>
  </template>
  
<script>
import { mapGetters } from "vuex";
import {navMsg,loginMsg,menuList} from "../assets/data/header"

  export default {
    name: 'the-header',
    data(){
        return{
            navMsg:[],
            keywords:'', /**搜索关键字 */
            loginMsg:[],
            menuList:[]
        }
    },
    computed:{
        ...mapGetters([
            'activeName',
            'loginIn',
            'avator'
        ])
    },
    created(){
        this.navMsg = navMsg;
        this.loginMsg = loginMsg;
        this.menuList = menuList;
    },
    mounted(){
        document.querySelector(" #user").addEventListener("click",function(e){
            document.querySelector(".menu").classList.add("show");
            e.stopPropagation()
        },false);
        document.querySelector(" #menu").addEventListener("click",function(e){
            e.stopPropagation()
        },false);
        document.addEventListener("click",function(e){
            document.querySelector(".menu").classList.add("show");
        },false);
    },
    methods:{
        goHome(){
            this.$router.push({path:"/"});
        },
        goPage(path,name){
            this.$store.commit('setActiveName',name);
            this.$router.push({path:path});
        },
        goSearch(){
            this.keywords = this.keywords;
            this.$router.push({path:'/search',query:{keywords:this.keywords}});
            
        },
        attachImageUrl(srcUrl){
            return srcUrl? this.$store.state.configure.HOST+srcUrl : '../assets/img/user.jpg';
        },
        goMenuList(path){
            if( path == 0){
                this.$store.commit('setLoginIn',false);
                this.$store.commit('setIsActive',false);
                this.$store.go(0);
            }else{
                this.$router.push({path:path});
            }
        }
    }
  }
  </script>
  
  <style  lang="scss" scoped>
  @import '../assets/css/the-header.scss';
  </style>
  